<template>
	<view>
		<view v-for="item in jokes" class="item"> {{ item }} </view>
	</view>
</template>

<script setup>
	/**
	 * 1.初始数据：生命周期,onLoad 直接写即可
	 * 2.下拉刷新：该配置，下拉事件中重新获取数据即可
	 * 3.触底加载更多：触底事件
	 */

	import { ref } from 'vue'
	// 组合 api 从这里导入
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

	const jokes = ref([])

	const getData = async (isMerge = false) => {
		const res = await uni.request({
			url: 'https://api-vue-base.itheima.net/api/joke/list',
			method: 'get',
			data: {
				num: 10,
			},
		})
		console.log(res)
		if (isMerge === true) {
			// ... 展开运算符
			// 合并
			jokes.value = [...jokes.value, ...res.data.data]
		} else {
			// 覆盖
			jokes.value = res.data.data
		}
	}

	getData()

	// 下拉刷新
	onPullDownRefresh(async () => {
		console.log('下拉刷新')
		await getData()
		uni.stopPullDownRefresh()
	})

	// 触底加载更多
	onReachBottom(() => {
		console.log('触底啦~')
		getData(true)
	})
</script>

<style>
	page {
		background-color: skyblue;
	}
	.item {
		color: white;
		background-color: orange;
		margin: 20rpx;
		border-radius: 30rpx;
		padding: 20rpx;
	}
</style>
